JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<script> /* ===================================================== Demeter Scene – FINAL VERSION (Layout Fixed + Scroll Arrow) ===================================================== */ if (!window._demeterStoryHtml) { window._demeterStoryHtml = $(".typewriter").html(); } /* === 1. 殺死所有舊音樂 === */ ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startDemeterScene = function() { /* ===== 建立音訊物件 ===== */ // 1. BGM: 建立物件 (先不播放) window.bgm = new Audio("https://files.catbox.moe/d1n7l4.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; // 2. 音軌 A (背景音/環境音) - 小聲 (rqp6gs) window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); // 3. 音軌 B (人聲/旁白) - 正常 (71x0rn) window.storyAudio2 = new Audio("https://files.catbox.moe/vh5std.wav"); /* === 判斷是否跳過動畫 === */ if (window.skipIntro === true) { /* --- 重試模式 (無動畫，直接開始) --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._demeterStoryHtml ? window._demeterStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); // 重試模式版面設定 $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); // 重試時播放背景音和語音 if(window.storyAudio1) { window.storyAudio1.volume = 0.5; window.storyAudio1.loop = true; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } window.skipIntro = false; } else { /* --- 正常模式 (動畫中，使用靜音暖機) --- */ // 看動畫時播放 BGM window.bgm.play().catch(e => console.log("BGM Error:", e)); // 效果音靜音偷跑 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } // 動畫流程 $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 9秒：停止 BGM window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); // 8.5秒：顯示介面 + 播放音軌 A + 打字機 setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); // --- 播放音軌 A (背景音) --- if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.loop = true; window.storyAudio1.volume = 0.2; // 音量 0.5 window.storyAudio1.play(); } startSmartTypewriter(); // --- 延遲 1 秒再播放音軌 B (人聲) --- setTimeout(function(){ if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } }, 1000); // 延遲 1秒 }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._demeterStoryHtml ? window._demeterStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 60.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 捲動偵測 === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 5. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; ["bgm", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { window[name].pause(); window[name] = null; } }); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startDemeterScene(); }; </script> <style> /* === 1. Demeter 專屬樣式 (淺綠色 #90EE90) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/I7NFFDd.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/I7NFFDd.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/I7NFFDd.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #90EE90; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #90EE90; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(144, 238, 144, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #90EE90; color: black; box-shadow: 0 0 5vmin rgba(144, 238, 144, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #90EE90; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (Demeter 淺綠色) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #90EE90; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(144, 238, 144, 0.3); position: relative; width: 100%; overflow: visible !important; margin-top: 60px; /* 防切 */ } /* === 內文捲動區 === */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #90EE90; border-radius: 10px; } .name-tag { position: absolute; top: -25px; left: 30px; background: #90EE90; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #90EE90; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(144, 238, 144, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #90EE90; color: #90EE90; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #90EE90; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #90EE90; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #90EE90; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #90EE90; box-shadow: 0 0 40px rgba(144, 238, 144, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #90EE90; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #90EE90; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startDemeterScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/L4Nsahi.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: DEMETER</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Demeter is the goddess of farming and harvest. She loved her daughter, Persephone, very much.<br><br> She often becomes heartbroken because Persephone disappears to the underworld. She tries to stop the earth from growing crops.<br><br> Their story shows a mother’s love that is strong enough to change the seasons. </div> <div class="internal-question"> Q: Why did the earth stop growing crops? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Demeter_Success"> <div class="card-icon">😢</div> <div class="card-title">Demeter's Sadness</div> <div class="card-desc">She was sad about her missing daughter.</div> </a> </div> <div class="tarot-card"> <a data-passage="Demeter_Fail"> <div class="card-icon">☀️</div> <div class="card-title">No Sun</div> <div class="card-desc">The sun stopped shining.</div> </a> </div> </div> </div>
<script> /* === 1. 音樂控制 === */ if (window.hubBGM) { try { window.hubBGM.pause(); } catch(e){} window.hubBGM = null; } if (window.bgm) { try { window.bgm.pause(); window.bgm.currentTime = 0; } catch(e){} window.bgm = null; } /* 播放勝利音樂 */ window.bgm = new Audio("https://files.catbox.moe/1ubrpp.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(_=>{}); /* === 2. 動畫控制 === */ /* 5秒後，顯示遮罩和內容 */ setTimeout(function() { $(".mask-layer").fadeIn(1500); $(".content-layer").css("display", "flex").hide().fadeIn(1500); }, 5000); </script> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } .video-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; } .ending-gif { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .mask-layer { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: 1; pointer-events: none; } .content-layer { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; flex-direction: column; justify-content: center; align-items: center; text-align: center; } h1 { font-size: 5em; color: #FFD700; text-shadow: 0 0 20px #DAA520, 0 0 10px white; font-family: "Courier New", Courier, monospace; margin: 0 0 20px 0; font-weight: 900; letter-spacing: 5px; } p { font-size: 1.8em; color: white; text-shadow: 2px 2px 4px black; margin: 0 0 60px 0; font-weight: bold; } /* 簡單的 THE END 文字樣式 */ .the-end { font-size: 3em; color: #FFD700; font-family: serif; letter-spacing: 10px; margin-top: 40px; opacity: 0.8; text-shadow: 0 0 10px #FFD700; border-top: 2px solid #FFD700; border-bottom: 2px solid #FFD700; padding: 10px 40px; } </style> <div class="video-bg"> <img src="https://i.meee.com.tw/qHjjxr4.gif" class="ending-gif"> </div> <div class="mask-layer"></div> <div class="content-layer"> <h1>MISSION COMPLETE</h1> <p>You have restored the myths of Olympus!</p> <div class="the-end">THE END</div> </div>
<script> /* ===================================================== Europa Scene – FINAL VERSION (Hera Template Applied) ===================================================== */ if (!window._europaStoryHtml) { window._europaStoryHtml = $(".typewriter").html(); } /* === 1. 殺死所有舊音樂 === */ window.stopEverything = function() { ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 進場先清空一次 window.stopEverything(); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startEuropaScene = function() { /* ===== 音訊設定 ===== */ // 1. BGM (背景音樂) window.bgm = new Audio("https://files.catbox.moe/a8rry8.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; // 2. ★★★ 環境音 (您指定的 rqp6gs.mp3) ★★★ window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); // 3. 故事旁白音效 (cfgj3q.mp3) window.storyAudio2 = new Audio("https://files.catbox.moe/cfgj3q.mp3"); /* === 判斷是否跳過動畫 === */ if (window.skipIntro === true) { /* --- 重試模式 --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._europaStoryHtml ? window._europaStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); // 重試模式版面設定 $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); // 重試時播放環境音和旁白 if(window.storyAudio1) { window.storyAudio1.volume = 0.5; window.storyAudio1.loop = true; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.play(); } window.skipIntro = false; } else { /* --- 正常模式 --- */ // 1. 播放 BGM window.bgm.play().catch(e => console.log("BGM Error:", e)); // 2. 靜音預載 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } // 3. 顯示 GIF 層 $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); // 4. 8秒後：GIF 淡出 setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 5. 9秒：停止 BGM window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); // 6. 8.5秒：顯示故事介面 + 播放音效 + 打字機 setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); // ★★★ 關鍵修復：播放 rqp6gs 與打字機同步 ★★★ if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.volume = 0.5; // 音量適中 window.storyAudio1.loop = true; // 循環播放 window.storyAudio1.play(); } startSmartTypewriter(); if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; setTimeout(() => { window.storyAudio2.play(); }, 500); } }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._europaStoryHtml ? window._europaStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 70.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { // 打字完成，顯示卡牌和箭頭 forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 捲動偵測 === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 5. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; window.stopEverything(); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startEuropaScene(); }; </script> <style> /* === 1. Europa 專屬樣式 (天空藍 #ADD8E6) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/AzPwDLD.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/AzPwDLD.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/AzPwDLD.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } /* GIF 全螢幕 */ .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #ADD8E6; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #ADD8E6; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(173, 216, 230, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #ADD8E6; color: black; box-shadow: 0 0 5vmin rgba(173, 216, 230, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #ADD8E6; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (Europa 天空藍) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #ADD8E6; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(173, 216, 230, 0.3); position: relative; width: 100%; /* ★★★ 防切關鍵 ★★★ */ overflow: visible !important; margin-top: 60px; } /* === 內文捲動區 === */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #ADD8E6; border-radius: 10px; } .name-tag { position: absolute; top: -25px; left: 30px; background: #ADD8E6; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #ADD8E6; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(173, 216, 230, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #ADD8E6; color: #ADD8E6; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #ADD8E6; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #ADD8E6; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #ADD8E6; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #ADD8E6; box-shadow: 0 0 40px rgba(173, 216, 230, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #ADD8E6; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #ADD8E6; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startEuropaScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/Ktgkw59.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: EUROPA</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Europa was a kind princess. One day, she saw a gentle white bull near the sea. She climbed onto its back, and the bull walked into the ocean and carried her across the water.<br><br> The bull was Zeus in disguise. Europa arrived on the island of Crete, where she became a queen. Her name later became the name of Europe.<br><br> 📌 <b>Europa’s story teaches us:</b> A journey can change your destiny. </div> <div class="internal-question"> Q: How did Europa travel across the sea? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Europa_Fail"> <div class="card-icon">🚢</div> <div class="card-title">Wooden Ship</div> <div class="card-desc">She sailed on a large boat.</div> </a> </div> <div class="tarot-card"> <a data-passage="Europa_Success"> <div class="card-icon">🐂</div> <div class="card-title">White Bull</div> <div class="card-desc">She rode on the back of the gentle bull.</div> </a> </div> </div> </div>
<script> /* ===================================================== Ganymede Scene – FINAL FIX VERSION (BGM Added) ===================================================== */ /* === 全域備份故事文字 === */ if (!window._ganymedeStoryHtml) { window._ganymedeStoryHtml = $(".typewriter").html(); } /* === 1. 核彈級靜音 === */ window.stopEverything = function() { ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2", "chaseSfx", "afterRunAudio", "introSfx"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 進場先清空一次 window.stopEverything(); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startGanymedeScene = function() { /* ===== 音訊設定 ===== */ // 1. BGM (開場音樂) window.bgm = new Audio("https://files.catbox.moe/zeh331.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; // 2. GIF 開場音效 (老鷹) window.introSfx = new Audio("https://files.catbox.moe/xbipoc.mp3"); window.introSfx.loop = false; window.introSfx.volume = 1.0; // 3. ★★★ 故事背景音樂 (新增) ★★★ window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); // 4. 旁白 window.storyAudio2 = new Audio("https://files.catbox.moe/0r2jf9.mp3"); /* === 判斷是否跳過動畫 === */ if (window.skipIntro === true) { /* --- 重試模式 --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._ganymedeStoryHtml ? window._ganymedeStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); // 重試時：播放背景音樂(小聲) + 旁白 if(window.storyAudio1) { window.storyAudio1.volume = 0.2; // 音量 20% window.storyAudio1.loop = true; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } window.skipIntro = false; } else { /* --- 正常模式 --- */ window.bgm.play().catch(e => console.log("BGM Error:", e)); window.introSfx.play().catch(e => console.log("Intro SFX Error:", e)); // 靜音預載 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 9秒：停止 開場 BGM window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); // 8.5秒：顯示介面 + 播放故事聲音 setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); startSmartTypewriter(); // 播放背景音樂 (小聲) if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.loop = true; window.storyAudio1.volume = 0.2; // 音量 20% window.storyAudio1.play(); } // 播放旁白 if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; setTimeout(() => { window.storyAudio2.play(); }, 500); } }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._ganymedeStoryHtml ? window._ganymedeStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 60.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { // 打字完成：顯示卡牌、箭頭，並啟動偵測 forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 5. ★★★ 捲動偵測函數 ★★★ === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 6. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; window.stopEverything(); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); // 重置捲軸位置與箭頭 $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startGanymedeScene(); }; </script> <style> /* === 1. Ganymede 專屬樣式 (皇家紫 #9370DB) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/B2YXVAd.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/B2YXVAd.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/B2YXVAd.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #9370DB; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #9370DB; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(147, 112, 219, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #9370DB; color: black; box-shadow: 0 0 5vmin rgba(147, 112, 219, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #9370DB; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (Ganymede 紫色) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #9370DB; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(147, 112, 219, 0.3); position: relative; width: 100%; /* ★★★ 防切關鍵 ★★★ */ overflow: visible !important; margin-top: 60px; } /* === 內文捲動區 (新增) === */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #9370DB; border-radius: 10px; } /* 字體設定 (大字體) */ .name-tag { position: absolute; top: -25px; left: 30px; background: #9370DB; color: black; padding: 5px 25px; font-weight: 900; font-size: 24px; /* Big Text */ border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 26px; /* Big Text */ line-height: 1.6; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #555; color: #9370DB; font-weight: 900; font-size: 28px; /* Big Text */ text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(147, 112, 219, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #9370DB; color: #9370DB; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 16px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #9370DB; color: black; } /* ★★★ 捲動提示箭頭 (新增) ★★★ */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #9370DB; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #9370DB; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #9370DB; box-shadow: 0 0 40px rgba(147, 112, 219, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #9370DB; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #9370DB; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startGanymedeScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/R0Iaoi7.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: GANYMEDE</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Ganymede was a beautiful young boy from Troy who loved nature and the open sky.<br><br> One day, a great eagle carried him up to Mount Olympus. There, Ganymede became the cupbearer of the gods, serving drinks to the Olympians.<br><br> He was given eternal youth and became a star in the sky.<br><br> 📌 <b>Ganymede’s story teaches us:</b> Being chosen can bring honor and change. </div> <div class="internal-question"> Q: What was Ganymede’s role on Mount Olympus? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Ganymede_Success"> <div class="card-icon">🍷</div> <div class="card-title">Cupbearer</div> <div class="card-desc">He served drinks to the gods.</div> </a> </div> <div class="tarot-card"> <a data-passage="Ganymede_Fail"> <div class="card-icon">🛡️</div> <div class="card-title">Guardian</div> <div class="card-desc">He guarded the underworld.</div> </a> </div> </div> </div>
<script> /* ===================================================== Hera Scene – FINAL VERSION (Layout Fixed) ===================================================== */ if (!window._heraStoryHtml) { window._heraStoryHtml = $(".typewriter").html(); } /* === 1. 殺死所有舊音樂 === */ ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startHeraScene = function() { window.bgm = new Audio("https://files.catbox.moe/voeziz.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); window.storyAudio2 = new Audio("https://files.catbox.moe/o5ugb7.mp3"); if (window.skipIntro === true) { /* --- 重試模式 --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._heraStoryHtml ? window._heraStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); // 重試時直接顯示箭頭並啟動偵測 $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); if(window.storyAudio1) { window.storyAudio1.volume = 0.2; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } window.skipIntro = false; } else { /* --- 正常模式 --- */ window.bgm.play().catch(e => console.log("BGM Error:", e)); if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); startSmartTypewriter(); if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.loop = false; window.storyAudio1.volume = 0.2; } setTimeout(function(){ if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; } }, 1000); }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._heraStoryHtml ? window._heraStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 60.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 捲動偵測 (改為偵測 scroll-content) === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); // 讓箭頭淡出 $(".scroll-indicator").css("opacity", "0"); } }); } /* === 5. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; ["bgm", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { window[name].pause(); window[name] = null; } }); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startHeraScene(); }; </script> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/nSnf3KS.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/nSnf3KS.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/nSnf3KS.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #32CD32; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #32CD32; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(50, 205, 50, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #32CD32; color: black; box-shadow: 0 0 5vmin rgba(50, 205, 50, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #32CD32; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (外框) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #32CD32; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(50, 205, 50, 0.3); position: relative; width: 100%; /* ★★★ 關鍵修改：讓 overflow 可見，標籤才不會被切掉 ★★★ */ overflow: visible !important; /* ★★★ 增加上邊距，確保標籤不會被螢幕頂部切掉 ★★★ */ margin-top: 60px; } /* === 內文捲動區 (內層) === */ .scroll-content { /* 限制高度並允許捲動 */ max-height: 70vh; overflow-y: auto; padding-right: 5px; /* 留點空間給捲軸 */ padding-bottom: 40px; /* 留空間給箭頭 */ } /* 捲軸美化 (作用於內層) */ .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #32CD32; border-radius: 10px; } /* 標籤 (絕對定位) */ .name-tag { position: absolute; top: -25px; left: 30px; background: #32CD32; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; /* 確保浮在最上面 */ } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #32CD32; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(50, 205, 50, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #32CD32; color: #32CD32; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #32CD32; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #32CD32; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #32CD32; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #32CD32; box-shadow: 0 0 40px rgba(50, 205, 50, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #32CD32; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #32CD32; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startHeraScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/bJnStO9.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: HERA</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Long, long ago, on the high mountain of Olympus, there lived a proud and beautiful goddess named Hera. She was the queen of the gods, the wife of Zeus, and the goddess of marriage and family.<br><br> Hera believed that promises should be kept and that love should be honest and faithful. But Zeus often forgot these promises, making Hera feel sad and angry. Even though she was a powerful goddess, her heart could still be hurt.<br><br> 📌 <b>Hera’s story teaches us:</b> Love should be respectful, and broken promises cause pain. </div> <div class="internal-question"> Q: What is Hera the goddess of? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Hera_Fail"> <div class="card-icon">🌊</div> <div class="card-title">Sea & Ships</div> <div class="card-desc">She rules over the sea and ships.</div> </a> </div> <div class="tarot-card"> <a data-passage="Hera_Success"> <div class="card-icon">💍</div> <div class="card-title">Marriage & Family</div> <div class="card-desc">She protects marriage and family.</div> </a> </div> </div> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 立即停止舊音樂 window.stopAllBGM(); window.startSequence = function() { /* ★★★ Hera 專屬音效 ★★★ */ window.bgm = new Audio("https://files.catbox.moe/nge0jg.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* ★★★ 強制撐滿螢幕寬高 (依模板設定) ★★★ */ width: 100vw; height: 100vh; object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 背景圖 (Hera) */ background-image: url("https://i.meee.com.tw/nSnf3KS.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/5Geb9wn.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">Hera Appeased</div> <div class="story-text"> <p><b>You chose to punish them.</b></p> <p>This is the true Hera. Your wrath became legendary. While Zeus ruled the sky, you ruled the marriage bed with an iron fist.</p> <p>Your jealousy defined Greek myths, proving that the Queen of Olympus is not to be trifled with.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Hera's Golden Peacock Feather! ✨</span> </div> </div> </div> <<set $doneHera to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* ===================================================== Leto Scene – FINAL VERSION (GIF Audio + Narration Timing Fixed) ===================================================== */ if (!window._letoStoryHtml) { window._letoStoryHtml = $(".typewriter").html(); } /* === 1. 核彈級靜音函式 === */ window.stopEverything = function() { ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2", "chaseSfx", "afterRunAudio"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); var audioTags = document.getElementsByTagName("audio"); for (var i = audioTags.length - 1; i >= 0; i--) { try { audioTags[i].pause(); audioTags[i].remove(); } catch(e) {} } }; window.stopEverything(); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); window.isGameWon = false; /* === 2. 開始場景 === */ window.startLetoScene = function() { window.isGameWon = false; /* ★★★ 音訊設定 ★★★ */ // 1. GIF 配音 (您指定的 tjlt74.mp3) window.bgm = new Audio("https://files.catbox.moe/tjlt74.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; // 2. 氛圍音 (打字機時播放 rqp6gs.mp3) window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); // 3. 追逐音效 window.chaseSfx = new Audio("https://files.catbox.moe/pjhpxv.mp3"); // 4. 旁白 (ag3c1u.mp3) window.storyAudio2 = new Audio("https://files.catbox.moe/ag3c1u.mp3"); if (window.skipIntro === true) { /* --- 重試模式 --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._letoStoryHtml ? window._letoStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); if(window.storyAudio1) { window.storyAudio1.volume = 0.2; window.storyAudio1.loop = true; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.play(); } // 重試時直接播旁白 window.skipIntro = false; } else { /* --- 正常模式 --- */ // ★★★ 立即播放 GIF 配樂 (tjlt74.mp3) ★★★ window.bgm.play().catch(e => console.log("BGM Error:", e)); // 靜音預載其他音效 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 9秒：停止 GIF 配樂 window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); // 8.5秒：顯示介面 + 播放音效 + 打字機 setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); // 播放 rqp6gs (氛圍音) if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.volume = 0.2; window.storyAudio1.loop = true; window.storyAudio1.play(); } startSmartTypewriter(); // ★★★ 修正旁白時機：不延遲，直接播放 ★★★ if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; // 移除之前的 500ms setTimeout，改為直接播放 window.storyAudio2.play().catch(e=>{}); } }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._letoStoryHtml ? window._letoStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 70.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { // 打字完成 $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); // 2秒後開始遊戲 setTimeout(startChaseEvent, 2000); } } typeLoop(); } /* === 捲動偵測 === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 4. 追逐小遊戲邏輯 === */ var chaseProgress = 0; var chaseInterval = null; window.startChaseEvent = function() { if (window.isGameWon) return; if(window.storyAudio2) { window.storyAudio2.pause(); } if(window.storyAudio1) { window.storyAudio1.pause(); } $("body").addClass("shake-mode"); $("body").addClass("python-bg"); $(".minigame-layer").css("display", "flex").hide().fadeIn(300); if(window.chaseSfx) { window.chaseSfx.currentTime = 0; window.chaseSfx.loop = true; window.chaseSfx.play().catch(e=>{}); } chaseProgress = 15; updateProgressBar(); if (chaseInterval) clearInterval(chaseInterval); chaseInterval = setInterval(function() { if (!window.isGameWon) { chaseProgress -= 1.5; if (chaseProgress < 0) chaseProgress = 0; updateProgressBar(); } }, 100); }; window.clickRun = function() { if (window.isGameWon) return; chaseProgress += 10; $(".run-btn").addClass("clicked"); setTimeout(() => $(".run-btn").removeClass("clicked"), 100); updateProgressBar(); if (chaseProgress >= 100) { winChase(); } }; function updateProgressBar() { $("#progress-fill").css("width", chaseProgress + "%"); } function winChase() { if (window.isGameWon) return; window.isGameWon = true; clearInterval(chaseInterval); window.stopEverything(); // 勝利後播放 rqp6gs (平靜版) setTimeout(function() { window.afterRunAudio = new Audio("https://files.catbox.moe/rqp6gs.mp3"); window.afterRunAudio.volume = 1.0; window.afterRunAudio.loop = true; window.afterRunAudio.play().catch(e=>{}); }, 100); $("body").removeClass("shake-mode"); $("body").removeClass("python-bg"); $(".minigame-layer").fadeOut(500); forceShowCards(); } /* === 5. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 6. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; window.isGameWon = false; if (chaseInterval) clearInterval(chaseInterval); $("body").removeClass("shake-mode").removeClass("python-bg"); $(".minigame-layer").hide(); window.stopEverything(); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startLetoScene(); }; </script> <style> /* === 1. Leto 基礎樣式 (金色 #FFD700) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/eLaeSht.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; transition: background-image 0.5s ease; } tw-sidebar, #ui-bar { display: none !important; } /* 追逐模式：巨蛇背景 */ body.python-bg { background-image: url("https://i.meee.com.tw/EZsamOw.png") !important; } /* 地震動畫 */ .shake-mode .game-layout { animation: earthquake 0.5s infinite; } @keyframes earthquake { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-5px, 5px) rotate(-1deg); } 50% { transform: translate(5px, -5px) rotate(1deg); } 75% { transform: translate(-5px, -5px) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(0deg); } } /* 小遊戲介面 */ .minigame-layer { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; flex-direction: column; justify-content: center; align-items: center; background: transparent; } .danger-text { font-size: 60px; color: #ff3333; font-weight: 900; text-transform: uppercase; letter-spacing: 5px; text-shadow: 0 0 20px black, 0 0 10px black; animation: blink 0.3s infinite alternate; margin-bottom: 20px; } .click-hint-text { font-size: 28px; color: #FFD700; font-weight: bold; margin-bottom: 30px; text-transform: uppercase; text-shadow: 2px 2px 0 black; animation: pulseText 0.5s infinite alternate; } @keyframes pulseText { from { transform: scale(1); } to { transform: scale(1.1); } } @keyframes blink { from { opacity: 1; transform: scale(1); } to { opacity: 0.7; transform: scale(0.95); } } .progress-bar-container { width: 70%; max-width: 800px; height: 40px; background: rgba(51, 0, 0, 0.8); border: 4px solid #ff3333; border-radius: 20px; overflow: hidden; margin-bottom: 50px; box-shadow: 0 0 30px #ff0000, 0 0 20px black; } #progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #ffcc00, #ff3333); transition: width 0.1s linear; } .run-btn { width: 180px; height: 180px; border-radius: 50%; background: #ff3333; border: 6px solid white; color: white; font-size: 40px; font-weight: 900; cursor: pointer; user-select: none; box-shadow: 0 15px 0 #990000, 0 15px 30px rgba(0,0,0,0.8); transition: transform 0.05s; display: flex; justify-content: center; align-items: center; } .run-btn:active, .run-btn.clicked { transform: translateY(15px); box-shadow: 0 0 0 #990000, 0 0 20px rgba(255,0,0,0.8); background: white; color: red; } /* === 一般介面樣式 === */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/eLaeSht.jpg"); background-size: cover; background-position: center; } .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/eLaeSht.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } .start-btn { background: rgba(0, 0, 0, 0.7); color: #FFD700; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #FFD700; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(255, 215, 0, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #FFD700; color: black; box-shadow: 0 0 5vmin rgba(255, 215, 0, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #FFD700; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 40px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #FFD700; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); position: relative; width: 100%; overflow: visible !important; margin-top: 60px; /* 防切 */ } /* 內層捲動區 */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } .name-tag { position: absolute; top: -25px; left: 30px; background: #FFD700; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #FFD700; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #FFD700; color: #FFD700; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #FFD700; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #FFD700; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #FFD700; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #FFD700; box-shadow: 0 0 40px rgba(255, 215, 0, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #FFD700; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #FFD700; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startLetoScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/NqcuZyS.gif" class="intro-gif"> </div> <div class="minigame-layer"> <div class="danger-text">PYTHON IS COMING!</div> <div class="click-hint-text">Rapid clicking!!</div> <div class="progress-bar-container"> <div id="progress-fill"></div> </div> <div class="run-btn" onclick="clickRun()">RUN!</div> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: LETO</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Leto was a gentle goddess. She was expecting two babies, but no place would welcome her. She walked from land to land, tired and alone.<br><br> At last, she reached a small island called Delos. There, she gave birth to twins: 🌙 Artemis, goddess of the moon, and ☀️ Apollo, god of the sun.<br><br> Leto never gave up, and her children grew into great gods. 📌 <b>Leto’s story teaches us:</b> A mother’s love gives strength, even in hard times. </div> <div class="internal-question"> Q: The Python is closing in! Where will you go? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Leto_Success"> <div class="card-icon">🌊</div> <div class="card-title">Island of Delos</div> <div class="card-desc">Trust the barren, floating island in the sea.</div> </a> </div> <div class="tarot-card"> <a data-passage="Leto_Fail"> <div class="card-icon">🏰</div> <div class="card-title">Rich Lands</div> <div class="card-desc">Keep begging the wealthy cities for shelter.</div> </a> </div> </div> </div>
<script> /* ===================================================== Maia Scene – FINAL VERSION (Layout Fixed + Scroll Arrow) ===================================================== */ if (!window._maiaStoryHtml) { window._maiaStoryHtml = $(".typewriter").html(); } /* === 1. 殺死所有舊音樂 === */ ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startMaiaScene = function() { /* ===== 建立音訊物件 ===== */ // 1. BGM: 建立物件 (先不播放) window.bgm = new Audio("https://files.catbox.moe/gt2d7c.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; // 2. 音軌 A (背景音/環境音) - 小聲 (rqp6gs) window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); // 3. 音軌 B (人聲/旁白) - 正常 (gncmwh.wav) window.storyAudio2 = new Audio("https://files.catbox.moe/gncmwh.wav"); /* === 判斷是否跳過動畫 === */ if (window.skipIntro === true) { /* --- 重試模式 (無動畫，直接開始) --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._maiaStoryHtml ? window._maiaStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); // 重試模式版面設定 $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); // 重試時播放背景音和語音 if(window.storyAudio1) { window.storyAudio1.volume = 0.5; window.storyAudio1.loop = true; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } window.skipIntro = false; } else { /* --- 正常模式 (動畫中，使用靜音暖機) --- */ // 看動畫時播放 BGM window.bgm.play().catch(e => console.log("BGM Error:", e)); // 效果音靜音偷跑 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } // 動畫流程 $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 9秒：停止 BGM window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); // 8.5秒：顯示介面 + 播放音軌 A + 打字機 setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); // --- 播放音軌 A (背景音) --- if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.loop = true; window.storyAudio1.volume = 0.2; // 音量 0.5 window.storyAudio1.play(); } startSmartTypewriter(); // --- 延遲 1 秒再播放音軌 B (人聲) --- setTimeout(function(){ if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } }, 1000); // 延遲 1秒 }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._maiaStoryHtml ? window._maiaStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 60.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 捲動偵測 === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 5. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; ["bgm", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { window[name].pause(); window[name] = null; } }); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startMaiaScene(); }; </script> <style> /* === 1. Maia 專屬樣式 (卡其色 #F0E68C) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/jLFtkZG.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/jLFtkZG.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/jLFtkZG.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #F0E68C; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #F0E68C; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(240, 230, 140, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #F0E68C; color: black; box-shadow: 0 0 5vmin rgba(240, 230, 140, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #F0E68C; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (Maia 卡其色) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #F0E68C; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(240, 230, 140, 0.3); position: relative; width: 100%; overflow: visible !important; margin-top: 60px; /* 防切 */ } /* === 內文捲動區 === */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #F0E68C; border-radius: 10px; } .name-tag { position: absolute; top: -25px; left: 30px; background: #F0E68C; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #F0E68C; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(240, 230, 140, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #F0E68C; color: #F0E68C; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #F0E68C; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #F0E68C; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #F0E68C; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #F0E68C; box-shadow: 0 0 40px rgba(240, 230, 140, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #F0E68C; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #F0E68C; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startMaiaScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/p3Y9Pk1.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: MAIA</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Maia lived quietly in a mountain cave.<br><br> She liked peace and silence. She gave birth to a clever baby named Hermes.<br><br> Hermes was special from the very first day. He could walk, talk, and think fast. He grew up to be the messenger of the gods, fast and smart.<br><br> 📌 <b>Maia’s story teaches us:</b><br> Quiet places can raise bright minds. </div> <div class="internal-question"> Q: Who was Maia’s child? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Maia_Success"> <div class="card-icon">⚡</div> <div class="card-title">Hermes</div> <div class="card-desc">The clever messenger god.</div> </a> </div> <div class="tarot-card"> <a data-passage="Maia_Fail"> <div class="card-icon">☀️</div> <div class="card-title">Apollo</div> <div class="card-desc">The god of the sun.</div> </a> </div> </div> </div>
<script> /* ===================================================== Metis Scene – FINAL VERSION (Audio Fixed + Layout Optimized) ===================================================== */ if (!window._metisStoryHtml) { window._metisStoryHtml = $(".typewriter").html(); } /* === 1. 殺死所有舊音樂 === */ ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startMetisScene = function() { /* BGM 設定 */ window.bgm = new Audio("https://files.catbox.moe/bes401.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; /* ★★★ 這首是環境音 rqp6gs ★★★ */ window.storyAudio1 = new Audio ("https://files.catbox.moe/rqp6gs.mp3"); /* 這首是旁白 */ window.storyAudio2 = new Audio("https://files.catbox.moe/ybzqmo.mp3"); if (window.skipIntro === true) { /* --- 重試模式 --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._metisStoryHtml ? window._metisStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); // 重試時：BGM 小聲，環境音與旁白正常播 window.bgm.volume = 0.2; window.bgm.play(); if(window.storyAudio1) { window.storyAudio1.volume = 0.5; window.storyAudio1.loop = true; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.play(); } window.skipIntro = false; } else { /* === 正常播放動畫 === */ window.bgm.play().catch(e => console.log("BGM Error:", e)); // 靜音預載 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 9秒後 BGM 變小聲 (讓路給旁白) window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.volume = 0.2; }, 9000); setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); startSmartTypewriter(); // ★★★ 這裡補回了環境音 (rqp6gs) 的播放指令 ★★★ if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.loop = true; // 環境音通常循環 window.storyAudio1.volume = 0.2; // 音量適中 window.storyAudio1.play(); } // 播放旁白 if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; setTimeout(() => { window.storyAudio2.play(); }, 500); } }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._metisStoryHtml ? window._metisStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 60.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 捲動偵測 === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 5. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; ["bgm", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { window[name].pause(); window[name] = null; } }); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startMetisScene(); }; </script> <style> /* === 1. Metis 專屬樣式 (智慧藍 #87CEEB) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/kFTuNh9.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/kFTuNh9.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/kFTuNh9.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #87CEEB; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #87CEEB; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(135, 206, 235, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #87CEEB; color: black; box-shadow: 0 0 5vmin rgba(135, 206, 235, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #87CEEB; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (Metis 藍色) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #87CEEB; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(135, 206, 235, 0.3); position: relative; width: 100%; overflow: visible !important; margin-top: 60px; /* 防切 */ } /* === 內文捲動區 === */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #87CEEB; border-radius: 10px; } .name-tag { position: absolute; top: -25px; left: 30px; background: #87CEEB; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #87CEEB; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(135, 206, 235, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #87CEEB; color: #87CEEB; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #87CEEB; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #87CEEB; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #87CEEB; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #87CEEB; box-shadow: 0 0 40px rgba(135, 206, 235, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #87CEEB; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #87CEEB; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startMetisScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/DuQP1RI.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: METIS</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Before the world was fully formed, there was a wise goddess named Metis. She was known for her intelligence and always knew how to solve problems.<br><br> One day, Zeus heard a prophecy: “Metis will give birth to a child wiser than Zeus.” Afraid of losing his power, he swallowed Metis to stop the prophecy. But wisdom cannot disappear. Later, Zeus felt a terrible pain, and Athena was born from his head.<br><br> 📌 <b>Metis’s story teaches us:</b> Wisdom cannot be hidden forever. </div> <div class="internal-question"> Q: What was Metis known for? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Metis_Fail"> <div class="card-icon">⚔️</div> <div class="card-title">War Strength</div> <div class="card-desc">Her strength in fighting wars.</div> </a> </div> <div class="tarot-card"> <a data-passage="Metis_Success"> <div class="card-icon">🧠</div> <div class="card-title">Wisdom</div> <div class="card-desc">Her wisdom and clever ideas.</div> </a> </div> </div> </div>
<script> /* ===================================================== Semele Scene – FINAL VERSION (Layout Fixed + Scroll Arrow) ==================================================== */ if (!window._semeleStoryHtml) { window._semeleStoryHtml = $(".typewriter").html(); } /* === 1. 殺死所有舊音樂 === */ ["bgm", "hubBGM", "menuBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); if (window.stopMusicTimer) clearTimeout(window.stopMusicTimer); /* === 2. 開始場景 === */ window.startSemeleScene = function() { /* ===== 建立音訊物件 ===== */ // 1. BGM: 建立物件 (先不播放) window.bgm = new Audio("https://files.catbox.moe/6hsqrn.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; // 2. 音軌 A (背景音/環境音) - 小聲 window.storyAudio1 = new Audio("https://files.catbox.moe/rqp6gs.mp3"); // 3. 音軌 B (人聲/旁白) - 正常 window.storyAudio2 = new Audio("https://files.catbox.moe/25vmd7.mp3"); /* === 判斷是否跳過動畫 === */ if (window.skipIntro === true) { /* --- 重試模式 (無動畫，直接開始) --- */ $(".start-screen-layer").hide(); $(".intro-overlay").hide(); $(".game-layout").css("opacity", "1"); var $txt = $(".typewriter"); var fullHtml = window._semeleStoryHtml ? window._semeleStoryHtml.trim() : $txt.html().trim(); $txt.html(fullHtml).css("visibility", "visible"); $(".internal-question").css("opacity", "1"); $(".tarot-card").addClass("visible"); // 重試模式版面設定 $(".scroll-content").removeClass("scrolled"); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); // 重試時只播放效果音，不播放 BGM if(window.storyAudio1) { window.storyAudio1.volume = 0.2; window.storyAudio1.play(); } if(window.storyAudio2) { window.storyAudio2.volume = 1.0; window.storyAudio2.play(); } window.skipIntro = false; } else { /* --- 正常模式 (動畫中，使用靜音暖機) --- */ // 看動畫時播放 BGM window.bgm.play().catch(e => console.log("BGM Error:", e)); // 效果音靜音偷跑 if(window.storyAudio1) { window.storyAudio1.volume = 0; window.storyAudio1.loop = true; window.storyAudio1.play().catch(e=>{}); } if(window.storyAudio2) { window.storyAudio2.volume = 0; window.storyAudio2.loop = true; window.storyAudio2.play().catch(e=>{}); } // 動畫流程 $(".start-screen-layer").fadeOut(500); $(".intro-overlay").css("opacity", "1"); setTimeout(function(){ $(".intro-overlay").addClass("start-fade-out"); }, 8000); // 9秒：停止 BGM window.stopMusicTimer = setTimeout(function() { if (window.bgm) window.bgm.pause(); }, 9000); // 8.5秒：顯示介面 + 播放音軌 A + 打字機 setTimeout(function(){ $(".game-layout").addClass("show-layout-anim"); startSmartTypewriter(); // --- 播放音軌 A (背景音) --- if(window.storyAudio1) { window.storyAudio1.currentTime = 0; window.storyAudio1.loop = false; window.storyAudio1.volume = 0.2; // 音量 0.2 } // --- 延遲 1 秒再播放音軌 B (人聲) --- setTimeout(function(){ if(window.storyAudio2) { window.storyAudio2.currentTime = 0; window.storyAudio2.loop = false; window.storyAudio2.volume = 1.0; } }, 1000); // 延遲 1秒 }, 8500); } }; /* === 3. 智慧型打字機 === */ function startSmartTypewriter() { var $txt = $(".typewriter"); $txt.css("visibility", "visible"); var fullHtml = window._semeleStoryHtml ? window._semeleStoryHtml.trim() : $txt.html().trim(); $txt.html(""); var i = 0; var speed = 60.5; function typeLoop() { if (i < fullHtml.length) { if (fullHtml.charAt(i) === '<') { var tagEnd = fullHtml.indexOf('>', i); if (tagEnd !== -1) { $txt.append(fullHtml.substring(i, tagEnd + 1)); i = tagEnd + 1; setTimeout(typeLoop, 0); return; } } $txt.append(fullHtml.charAt(i)); i++; setTimeout(typeLoop, speed); } else { forceShowCards(); $(".scroll-indicator").css("opacity", "1"); initScrollDetector(); } } typeLoop(); } /* === 4. 顯示卡牌 === */ function forceShowCards() { $(".internal-question").css("opacity", "1"); $(".tarot-card").each(function(index) { var card = $(this); setTimeout(function() { card.addClass("visible"); }, 300 * index); }); } /* === 捲動偵測 === */ function initScrollDetector() { var $box = $(".scroll-content"); $box.off("scroll.indicator"); $box.on("scroll.indicator", function() { if ($(this).scrollTop() > 30) { $(this).addClass("scrolled"); $(".scroll-indicator").css("opacity", "0"); } }); } /* === 5. 重播功能 === */ window.replayScene = function() { window.skipIntro = false; ["bgm", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { window[name].pause(); window[name] = null; } }); $(".intro-overlay").removeClass("start-fade-out"); $(".game-layout").removeClass("show-layout-anim").css("opacity", "0"); $(".typewriter").html("").css("visibility", "hidden"); $(".internal-question").css("opacity", "0"); $(".tarot-card").removeClass("visible"); $(".scroll-content").removeClass("scrolled").scrollTop(0); $(".scroll-indicator").css("opacity", "0"); startSemeleScene(); }; </script> <style> /* === 1. Semele 專屬樣式 (烈火紅 #FF4500) === */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden !important; } body, tw-story { background-image: url("https://i.meee.com.tw/s2Hu6TY.jpg") !important; background-size: cover !important; background-position: center center !important; background-color: black !important; } tw-sidebar, #ui-bar { display: none !important; } /* 開始畫面 */ .start-screen-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://i.meee.com.tw/s2Hu6TY.jpg"); background-size: cover; background-position: center; } /* GIF 層 */ .intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.meee.com.tw/s2Hu6TY.jpg"); background-size: cover; background-position: center; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .start-fade-out { animation: fadeOutOverlay 1s ease-in-out forwards; } @keyframes fadeOutOverlay { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } .intro-gif { width: 95%; height: 100%; object-fit: contain; box-shadow: 0 0 5vmin rgba(0,0,0,0.8); } /* 開始按鈕 */ .start-btn { background: rgba(0, 0, 0, 0.7); color: #FF4500; font-family: 'Georgia', serif; font-size: 3vmin; font-weight: bold; letter-spacing: 0.3vmin; padding: 1.5vmin 5vmin; border: 0.3vmin solid #FF4500; border-radius: 5vmin; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 2vmin rgba(255, 69, 0, 0.3); animation: pulseBtn 2s infinite; } .start-btn:hover { background: #FF4500; color: black; box-shadow: 0 0 5vmin rgba(255, 69, 0, 0.9); transform: scale(1.1); } @keyframes pulseBtn { 0% { opacity: 0.9; } 50% { opacity: 1; text-shadow: 0 0 1vmin #FF4500; } 100% { opacity: 0.9; } } .start-hint { color: #ddd; font-size: 1.8vmin; margin-top: 2vmin; font-family: sans-serif; background: rgba(0,0,0,0.5); padding: 0.5vmin 2vmin; border-radius: 2vmin; } /* === 遊戲佈局 === */ .game-layout { position: relative; z-index: 50; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; gap: 30px; opacity: 0; } .show-layout-anim { opacity: 1; transition: opacity 1s; } .left-panel { flex: 1.2; display: flex; flex-direction: column; justify-content: center; animation: slideInLeft 1s ease-out forwards; margin-top: -400px; } .right-panel { flex: 0.8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; animation: slideInRight 1s ease-out forwards; margin-top: -350px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* === 故事框 (Semele 紅色) === */ .dialogue-box { background-color: rgba(0, 0, 0, 0.85); border: 3px solid #FF4500; border-radius: 15px; padding: 25px; box-shadow: 0 0 30px rgba(255, 69, 0, 0.3); position: relative; width: 100%; overflow: visible !important; margin-top: 60px; /* 防切 */ } /* 內層捲動區 */ .scroll-content { max-height: 70vh; overflow-y: auto; padding-right: 5px; padding-bottom: 40px; } .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .scroll-content::-webkit-scrollbar-thumb { background: #FF4500; border-radius: 10px; } .name-tag { position: absolute; top: -25px; left: 30px; background: #FF4500; color: black; padding: 5px 25px; font-weight: 900; font-size: 20px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); transform: skew(-10deg); z-index: 20; } .story-text { font-size: 24px; line-height: 1.4; color: #ddd; margin-top: 10px; font-family: "Courier New", Courier, monospace; visibility: hidden; } .internal-question { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #555; color: #FF4500; font-weight: 900; font-size: 24px; text-align: left; opacity: 0; transition: opacity 1s; text-shadow: 0 0 10px rgba(255, 69, 0, 0.5); } .replay-btn { position: absolute; top: 15px; right: 15px; background: black; border: 1px solid #FF4500; color: #FF4500; padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: 0.3s; font-weight: bold; } .replay-btn:hover { background: #FF4500; color: black; } /* 捲動提示箭頭 */ .scroll-indicator { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: #FF4500; font-weight: bold; font-family: sans-serif; font-size: 16px; letter-spacing: 1px; text-shadow: 1px 1px 2px black; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: bounceArrow 1.5s infinite; z-index: 10; } .scroll-content.scrolled ~ .scroll-indicator { opacity: 0 !important; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* === 圓形卡牌 === */ .tarot-card { width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 3px solid #555; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; opacity: 0; display: flex; justify-content: center; align-items: center; } .tarot-card.visible { opacity: 1 !important; transform: translateY(0) !important; } .tarot-card a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none !important; color: white !important; padding: 20px; box-sizing: border-box; text-align: center; } .tarot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #FF4500; opacity: 0; transition: 0.3s; pointer-events: none; } .tarot-card:hover { transform: scale(1.05); border-color: #FF4500; box-shadow: 0 0 40px rgba(255, 69, 0, 0.4); } .tarot-card:hover::before { opacity: 1; } .card-icon { font-size: 45px; margin-bottom: 10px; text-shadow: 0 0 15px #FF4500; transition: 0.3s; pointer-events: none; } .card-title { font-size: 18px; font-weight: 900; color: #FF4500; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; } .card-desc { font-size: 13px; color: #bbb; line-height: 1.3; font-style: italic; pointer-events: none; } .tarot-card:hover .card-icon { transform: scale(1.2); } </style> <div class="start-screen-layer"> <button class="start-btn" onclick="startSemeleScene()">ENTER MEMORY</button> <div class="start-hint">Turn on sound for best experience</div> </div> <div class="intro-overlay"> <img src="https://i.meee.com.tw/LCdWpUL.gif" class="intro-gif"> </div> <div class="game-layout"> <div class="left-panel"> <div class="dialogue-box"> <div class="name-tag">STORY: SEMELE</div> <button class="replay-btn" onclick="replayScene()">↺ Replay Intro</button> <div class="scroll-content"> <div class="story-text typewriter" style="visibility:hidden;"> Semele was a human princess. She fell in love with Zeus, but she did not know he was a god.<br><br> Someone told her, “If he really loves you, ask him to show his true form.”<br><br> When Zeus appeared as a god, his power was too strong. Semele could not survive. But her baby was saved. He became Dionysus, the god of wine and joy.<br><br> 📌 <b>Semele’s story teaches us:</b><br> Some truths are too powerful to face. </div> <div class="internal-question"> Q: What happened to Semele’s baby? </div> </div> <div class="scroll-indicator">▼ SCROLL DOWN FOR QUESTION ▼</div> </div> </div> <div class="right-panel"> <div class="tarot-card"> <a data-passage="Semele_Fail"> <div class="card-icon">💨</div> <div class="card-title">Disappeared</div> <div class="card-desc">He disappeared forever.</div> </a> </div> <div class="tarot-card"> <a data-passage="Semele_Success"> <div class="card-icon">🍷</div> <div class="card-title">Became Dionysus</div> <div class="card-desc">He was saved and became a god.</div> </a> </div> </div> </div>
<<if $doneHera and $doneMetis and $doneLeto and $doneDemeter and $doneMaia and $doneSemele and $doneEuropa and $doneGanymede>> <<goto "Ending_Screen">> <</if>> <script> /* 1. 停掉所有舊音樂 */ ["bgm","hubBGM","menuBGM"].forEach(name => { if (window[name]) { window[name].pause(); window[name].currentTime = 0; window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); /* 2. 播放主選單音樂 */ window.hubBGM = new Audio("https://files.catbox.moe/cl174e.mp3"); window.hubBGM.loop = true; window.hubBGM.volume = 0.8; var playPromise = window.hubBGM.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Hub BGM Autoplay prevented"); }); } </script> <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet"> <a class="back-btn" data-passage="Start">←</a> <div class="game-stage"> <div class="title-group"> <h2>SEARCH FOR THE LOVERS</h2> <div class="subtitle">Help Zeus find his 8 missing partners</div> </div> <div class="inventory-container-top"> <div class="inv-grid"> <div @class="'inv-slot ' + ($doneHera ? 'unlocked' : 'locked')" data-name="Hera's Feather"><<if $doneHera>>🪶<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneMetis ? 'unlocked' : 'locked')" data-name="Drop of Wisdom"><<if $doneMetis>>💧<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneLeto ? 'unlocked' : 'locked')" data-name="Palm Branch"><<if $doneLeto>>🌴<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneDemeter ? 'unlocked' : 'locked')" data-name="Golden Wheat"><<if $doneDemeter>>🌾<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneMaia ? 'unlocked' : 'locked')" data-name="Tortoise Lyre"><<if $doneMaia>>🐢<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneSemele ? 'unlocked' : 'locked')" data-name="Wine Goblet"><<if $doneSemele>>🍷<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneEuropa ? 'unlocked' : 'locked')" data-name="White Horn"><<if $doneEuropa>>🐂<<else>>🔒<</if>></div> <div @class="'inv-slot ' + ($doneGanymede ? 'unlocked' : 'locked')" data-name="Golden Amphora"><<if $doneGanymede>>🏺<<else>>🔒<</if>></div> </div> </div> <div class="char-container"> <div class="char-box"><a data-passage="Hera"><<if visited("Hera")>><img src="https://i.meee.com.tw/uGWG6Bv.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/uGWG6Bv.png" class="char-img"><</if>><div class="char-name">Hera</div></a></div> <div class="char-box"><a data-passage="Metis"><<if visited("Metis")>><img src="https://i.meee.com.tw/Y5G5l2a.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/Y5G5l2a.png" class="char-img"><</if>><div class="char-name">Metis</div></a></div> <div class="char-box"><a data-passage="Leto"><<if visited("Leto")>><img src="https://i.meee.com.tw/8zwDCVY.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/8zwDCVY.png" class="char-img"><</if>><div class="char-name">Leto</div></a></div> <div class="char-box"><a data-passage="Demeter"><<if visited("Demeter")>><img src="https://i.meee.com.tw/hapzDdY.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/hapzDdY.png" class="char-img"><</if>><div class="char-name">Demeter</div></a></div> <div class="char-box"><a data-passage="Maia"><<if visited("Maia")>><img src="https://i.meee.com.tw/V3TFSqW.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/V3TFSqW.png" class="char-img"><</if>><div class="char-name">Maia</div></a></div> <div class="char-box"><a data-passage="Semele"><<if visited("Semele")>><img src="https://i.meee.com.tw/KHoGiKl.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/KHoGiKl.png" class="char-img"><</if>><div class="char-name">Semele</div></a></div> <div class="char-box"><a data-passage="Europa"><<if visited("Europa")>><img src="https://i.meee.com.tw/ud6vXBi.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/ud6vXBi.png" class="char-img"><</if>><div class="char-name">Europa</div></a></div> <div class="char-box"><a data-passage="Ganymede"><<if visited("Ganymede")>><img src="https://i.meee.com.tw/qu8qsSM.png" class="char-img visited"><<else>><img src="https://i.meee.com.tw/qu8qsSM.png" class="char-img"><</if>><div class="char-name">Ganymede</div></a></div> </div> <div class="ending-section"> <<if $doneHera and $doneMetis and $doneLeto and $doneDemeter and $doneMaia and $doneSemele and $doneEuropa and $doneGanymede>> <a data-passage="Ending_Screen" class="final-ending-btn">⭐ ENTER FINAL ENDING ⭐</a> <<else>> <div class="ending-hint">(Complete all 8 myths to unlock the true ending)</div> <</if>> </div> </div> <style> /* === 1. 核心鎖定設定 === */ html, body { width: 100%; height: 100vh; margin: 0; padding: 0; overflow: hidden !important; position: fixed; font-family: 'Fredoka', sans-serif !important; } body { background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://i.meee.com.tw/XV8Nm75.jpg"); background-size: cover !important; background-position: center center !important; background-attachment: fixed !important; } #ui-bar, #ui-bar-toggle { display: none !important; } #story { margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; } tw-passage, .passage { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* 遊戲主舞台 */ .game-stage { width: 100%; max-width: 1000px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding-bottom: 20px; transform: scale(0.85); transform-origin: top center; /* ★★★ 這裡！向下推移 200px ★★★ */ margin-top: 300px; } /* === 2. 標題群組 === */ .title-group { text-align: center; margin-bottom: 20px; z-index: 10; } h2 { font-size: 3em; color: #FFD700; text-shadow: 2px 2px 0 #000, 0 0 15px rgba(255,215,0,0.5); font-weight: 700; text-align: center; line-height: 1.1 !important; margin: 0 0 5px 0 !important; text-transform: uppercase; } .subtitle { font-size: 1.4em; color: #FFF; text-shadow: 1px 1px 2px black, 0 0 5px rgba(0,0,0,0.8); font-weight: 600; letter-spacing: 1px; background: rgba(0,0,0,0.4); padding: 5px 15px; border-radius: 20px; display: inline-block; } /* === 3. 物品欄 === */ .inventory-container-top { display: flex; justify-content: center; width: auto; max-width: 90%; background: rgba(0, 0, 0, 0.6); border: 2px solid #FFD700; border-radius: 50px; padding: 10px 30px; margin-bottom: 20px; z-index: 10; box-shadow: 0 5px 15px rgba(0,0,0,0.5); } .inv-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; background: transparent; padding: 0; } .inv-slot { width: 45px; height: 45px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 1px solid rgba(255, 215, 0, 0.5); cursor: help; position: relative; transition: 0.3s; } .inv-slot.locked { filter: grayscale(100%); opacity: 0.4; font-size: 18px; } .inv-slot.unlocked { background: rgba(255, 215, 0, 0.2); border-color: #FFD700; box-shadow: 0 0 10px #FFD700; animation: floatItem 3s ease-in-out infinite; } @keyframes floatItem { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} } .inv-slot:hover::after { content: attr(data-name); position: absolute; top: 55px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.9); color: #FFD700; font-size: 12px; padding: 5px 10px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: 0.2s; z-index: 20; border: 1px solid #FFD700; font-family: 'Fredoka', sans-serif; } .inv-slot:hover::after { opacity: 1; top: 60px; } /* === 4. 角色選單 === */ .char-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } .char-box { flex: 0 0 23% !important; min-width: 160px; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 5px !important; margin-bottom: 20px !important; cursor: pointer; transition: transform 0.3s ease; position: relative; z-index: 1; } .char-box a { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; text-decoration: none !important; } .char-box:hover { z-index: 10; transform: translateY(-10px) scale(1.05); } .char-img { width: 100% !important; max-width: 175px !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 50% !important; border: 5px solid white !important; box-shadow: 0 5px 15px rgba(0,0,0,0.55) !important; transition: 0.3s !important; } .char-name { margin-top: 5px !important; font-size: 20px !important; font-weight: 600 !important; color: white !important; text-shadow: 2px 2px 0 black, 0 0 8px rgba(255,255,255,0.8) !important; transition: 0.3s !important; text-align: center !important; width: 100% !important; font-family: 'Fredoka', sans-serif !important; } .char-img.visited { filter: grayscale(100%) !important; opacity: 0.6 !important; border-color: #999 !important; } .char-box:hover .char-img.visited { filter: grayscale(20%) !important; opacity: 1 !important; border-color: #FFD700 !important; } .char-box:hover .char-name { color: #FFD700 !important; } /* === 5. 結局按鈕 === */ .ending-section { width: 100%; text-align: center; margin-top: 40px; z-index: 999; height: 50px; } .final-ending-btn { display: inline-block; background-color: #FFD700; color: black !important; padding: 10px 30px; border-radius: 50px; font-size: 20px; font-weight: 700; text-decoration: none !important; box-shadow: 0 0 20px #FFD700, 0 0 40px rgba(255, 215, 0, 0.5); border: 3px solid white; cursor: pointer; animation: pulseBtn 1.5s infinite; text-transform: uppercase; } .final-ending-btn:hover { background-color: white; color: #FFD700 !important; transform: scale(1.1); box-shadow: 0 0 60px #FFD700; border-color: #FFD700; } .ending-hint { color: #bbb; font-style: italic; font-size: 14px; text-shadow: 1px 1px 2px black; } @keyframes pulseBtn { 0% { transform: scale(1); box-shadow: 0 0 20px #FFD700; } 50% { transform: scale(1.05); box-shadow: 0 0 40px #FFD700; } 100% { transform: scale(1); box-shadow: 0 0 20px #FFD700; } } .back-btn { position: fixed; top: 10px !important; left: 25px; font-size: 40px; color: #FFD700; text-shadow: 2px 2px 0 black; cursor: pointer; z-index: 9999; text-decoration: none !important; } .back-btn:hover { color: white !important; } @media (max-width: 900px) { .game-stage { transform: scale(0.75); margin-top: 100px; } .char-box { flex: 0 0 50% !important; min-width: unset; margin-bottom: 10px !important; } .char-img { max-width: 110px !important; } h2 { font-size: 2em; margin-top: 0 !important; } .subtitle { font-size: 1em; } } </style>
<<set $doneHera to false>> <<set $doneMetis to false>> <<set $doneLeto to false>> <<set $doneDemeter to false>> <<set $doneMaia to false>> <<set $doneSemele to false>> <<set $doneEuropa to false>> <<set $doneGanymede to false>>
<script> /* === 1. 背景音樂控制 === */ var bgmSrc = "https://files.catbox.moe/yr4hea.mp3"; if (window.bgm && window.bgm.src !== bgmSrc) { window.bgm.pause(); window.bgm.currentTime = 0; window.bgm = null; } if (!window.bgm) { window.bgm = new Audio(bgmSrc); window.bgm.loop = true; window.bgm.volume = 0.5; } /* === 2. 啟動邏輯 === */ window.initGame = function() { window.bgm.play().catch(e => { console.log("Music play failed."); }); // 淡出遮罩 $("#start-overlay").fadeOut(800); setTimeout(startTypewriter, 500); }; window.setVolume = function(v) { if(window.bgm) window.bgm.volume = v; document.getElementById("volume-value").textContent = Math.round(v * 100); }; window.toggleMute = function() { if(!window.bgm) return; window.bgm.muted = !window.bgm.muted; const icon = document.getElementById("mute-icon"); if(icon) { icon.textContent = window.bgm.muted ? "🔇" : "🎵"; icon.classList.toggle("bounce"); } }; /* === 3. 打字機特效 === */ function startTypewriter() { var $title = $(".mission-title"); var text = "⚡ EMERGENCY MISSION! ⚡"; $title.text(""); $title.css("visibility", "visible"); var i = 0; var speed = 100; function typeWriter() { if (i < text.length) { $title.append(text.charAt(i)); i++; setTimeout(typeWriter, speed); } } typeWriter(); } </script> <div id="start-overlay" onclick="window.initGame()"> <div class="start-content"> <div class="start-icon">💘</div> <h1>EMERGENCY CALL</h1> <p>Olympus is in Chaos!</p> <div class="click-hint">Click anywhere to accept</div> <div class="network-hint"> Please expect potential delays due to network connectivity or versioning issues.<br>Your patience is greatly appreciated. </div> </div> </div> <div id="music-controls"> <span id="mute-icon" class="bounce" onclick="toggleMute()">🎵</span> <input id="volume-slider" type="range" min="0" max="1" step="0.01" value="0.5" onchange="setVolume(this.value)"> <span id="volume-value" class="vol-text">50</span> </div> <style> /* === 1. 遮罩樣式 === */ #start-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* 背景圖 */ background-image: url("https://i.meee.com.tw/xp5FYEs.png"); background-size: cover; background-position: center; z-index: 10000; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: opacity 0.5s; /* 深色濾鏡 */ box-shadow: inset 0 0 0 2000px rgba(20, 0, 0, 0.7); } /* 對話框容器 */ .start-content { text-align: center; color: white; animation: pulseUrgent 1.2s infinite alternate; border: none; background: none; box-shadow: none; border-radius: 0; padding: 20px; transform: scale(1.1); text-shadow: 0 0 20px rgba(255, 69, 0, 0.8); display: flex; flex-direction: column; align-items: center; } /* ★★★ 新增：提示文字樣式 (無框框版) ★★★ */ .network-hint { font-size: 12px; /* 字縮小一點，當作註解 */ color: rgba(255, 255, 255, 0.6); /* 半透明白色，不搶眼 */ margin-top: 15px; /* 與上方文字的距離 */ font-family: sans-serif; font-weight: normal; text-shadow: none; line-height: 1.4; max-width: 90%; } .start-icon { font-size: 120px; margin-bottom: 0px; text-shadow: 0 0 30px #FF4500, 0 0 50px #FF0000; } .start-content h1 { font-family: "Impact", "Arial Black", sans-serif; font-size: 70px; color: #FF4500; letter-spacing: 4px; margin: 0; font-weight: 900; text-transform: uppercase; text-shadow: 4px 4px 0px black, 0 0 30px #FF4500; } .start-content p { font-family: sans-serif; font-size: 32px; font-weight: bold; color: #FFFFFF; text-shadow: 2px 2px 4px black; margin-top: 15px; margin-bottom: 40px; } .click-hint { font-size: 20px; color: #ddd; text-transform: uppercase; letter-spacing: 4px; border-top: 3px solid #FF4500; padding-top: 25px; font-weight: bold; text-shadow: 1px 1px 2px black; width: 100%; } /* 脈衝動畫 */ @keyframes pulseUrgent { 0% { transform: scale(1.1); filter: brightness(1); } 100% { transform: scale(1.15); filter: brightness(1.2) drop-shadow(0 0 15px red); } } @keyframes bounceIcon { from { transform: translateY(0); } to { transform: translateY(-10px); } } /* === 2. 遊戲主畫面樣式 === */ body { background-image: url("https://i.meee.com.tw/yiwHRj9.jpg"); background-size: cover; background-position: center center; background-color: black; } #music-controls { position: fixed; top: 15px; right: 20px; z-index: 9999; display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.5); padding: 12px 18px; border-radius: 14px; backdrop-filter: blur(4px); } #mute-icon { font-size: 30px; cursor: pointer; color: #FFD700; } .vol-text { color: white; font-weight: bold; font-size: 18px; font-family: sans-serif; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden !important; position: fixed; } #ui-bar, tw-sidebar { display: none !important; } #story { margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; } .passage { width: 100vw; height: 100vh; padding: 0; display: flex; align-items: center; justify-content: center; font-family: "Comic Sans MS", "Chalkboard SE", sans-serif; } a { text-decoration: none !important; border: none !important; } .main-container { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; gap: 10px; transform: translateX(-50px); } .left-panel { flex: 1; display: flex; justify-content: flex-end; align-items: center; position: relative; } .zeus-image { max-height: 185vh; width: auto; object-fit: contain; filter: drop-shadow(15px 15px 25px rgba(0,0,0,0.8)); animation: float 4s ease-in-out infinite; transition: transform 0.3s; cursor: help; } .zeus-image:hover { transform: scale(1.05) rotate(2deg); filter: drop-shadow(0 0 30px #FFD700); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .right-panel { flex: 1.6; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 15vh; padding-right: 50px; transform: translateX(-60px); height: 100vh; box-sizing: border-box; } /* === 卷軸與按鈕 === */ .mission-scroll { position: relative; background: #fff8dc; border: 8px solid #8B4513; border-radius: 30px; padding: 25px 45px; width: 90%; max-width: 720px; max-height: 55vh; overflow-y: auto; box-shadow: 15px 15px 0 rgba(0,0,0,0.5); transform: rotate(-1deg); transition: transform 0.3s; text-align: center; display: flex; flex-direction: column; } .mission-scroll:hover { transform: rotate(0deg) scale(1.01); } .mission-title { font-size: 2.2em; color: #FF7F50; font-weight: 900; text-align: center; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 3px dashed #8B4513; padding-bottom: 8px; visibility: hidden; min-height: 1.2em; flex-shrink: 0; text-shadow: 1px 1px 0 white; } .mission-text { font-size: 1.5em; color: #333; font-weight: bold; line-height: 1.4; text-align: left; } /* 下滑提示箭頭 */ .scroll-arrow { display: block; text-align: center; margin-bottom: 10px; font-size: 28px; color: #8B4513; font-weight: bold; animation: bounceArrow 2s infinite; opacity: 0.8; } @keyframes bounceArrow { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(5px);} 60% {transform: translateY(3px);} } .highlight { color: #d35400; background: #ffeaa7; padding: 0 5px; border-radius: 5px; } .urgent { color: #FF4500; font-weight: 900; text-decoration: underline; } .pin { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #c0392b; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 5;} .pin.top-left { top: 15px; left: 15px; } .pin.top-right { top: 15px; right: 15px; } /* 按鈕 */ .accept-btn { display: inline-block; margin-top: 20px; background: #FF7F50; color: white !important; font-size: 32px; font-weight: 900; padding: 15px 60px; border-radius: 50px; border: 4px solid white; box-shadow: 0 8px 0 #CD5B45, 0 20px 30px rgba(0,0,0,0.4); cursor: pointer; transition: all 0.1s; text-transform: uppercase; animation: pulseBtn 2s infinite; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); position: relative; z-index: 10; flex-shrink: 0; } .accept-btn:hover { background: #FF8C69; transform: translateY(-4px); box-shadow: 0 12px 0 #CD5B45, 0 20px 30px rgba(0,0,0,0.3); } .accept-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #CD5B45; } @keyframes pulseBtn { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1.1); } } </style> <div class="main-container"> <div class="left-panel"> <img src="https://i.meee.com.tw/5wSn08U.png" alt="Zeus" class="zeus-image"> </div> <div class="right-panel"> <div class="mission-scroll"> <div class="pin top-left"></div> <div class="pin top-right"></div> <div class="mission-title"></div> <div class="scroll-arrow">▼ SCROLL ▼</div> <div class="mission-text"> <span class="highlight">Zeus:</span> "Emergency! Olympus is in chaos!"<br> My eight loves have vanished. You must <span class="highlight">find them</span> and <span class="highlight">learn their stories</span>.<br> Bring them back to me. <span class="urgent">Move now!</span> </div> </div> <a data-passage="Intro_Video" onclick="if(window.bgm) window.bgm.pause();"> <div class="accept-btn">✨ START MISSION ✨</div> </a> </div> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 立即停止舊音樂 window.stopAllBGM(); window.startSequence = function() { /* ★★★ 請在此替換 Demeter 的成功音效連結 ★★★ */ window.bgm = new Audio("https://files.catbox.moe/jar34q.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* 強制撐滿螢幕 */ width: 100vw; height: 100vh; object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* ★★★ Demeter 背景圖 ★★★ */ background-image: url("https://i.meee.com.tw/I7NFFDd.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/qoC7QrH.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">The Goddess of Harvest</div> <div class="story-text"> <p><b>You remembered the seasons.</b></p> <p>Demeter's grief once froze the earth, but the return of her daughter Persephone brought back the warmth of spring.</p> <p>Your wisdom has restored the cycle of life to Olympus.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Golden Wheat Ear! ✨</span> </div> </div> </div> <<set $doneDemeter to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* 停止背景音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } /* 播放失敗音效 */ window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } /* 控制 GIF 淡出與內容淡入 */ setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } /* 背景圖 (Demeter) */ .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/I7NFFDd.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正為完美置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> The sun never stopped shining.<br><br> The earth became cold and barren because <b>Demeter was too sad</b> to let anything grow.<br><br> Her grief controlled the seasons. </div> <a data-passage="Demeter" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* ★★★ 修改重點：GIF 變大 ★★★ */ .fail-gif { width: auto; height: auto; max-width: 100%; /* 原本 80% */ max-height: 100%; /* 原本 80% */ object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/nSnf3KS.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /*稍微加寬一點以免文字太擠*/ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* ★★★ 修改重點：文字變大 ★★★ */ .fail-desc { font-size: 24px; /* 原本 18px */ margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* ★★★ 修改重點：按鈕文字變大 ★★★ */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; /* 原本 22px */ font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> Hera does not rule the sea.<br><br> Poseidon is the god of the sea. Hera is the Queen of Olympus and the Goddess of <b>Marriage and Family</b>.<br><br> She protects the sacred bond between husband and wife. </div> <a data-passage="Hera" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/kFTuNh9.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> Metis was not known for physical strength or war.<br><br> She was the Titaness of <b>Wisdom and Deep Thought</b>.<br><br> It was her clever mind that Zeus feared, not her muscles. </div> <a data-passage="Metis" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> /* 停止背景音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } /* 播放失敗音效 */ window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } /* 控制 GIF 淡出與內容淡入 */ setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } /* 背景圖更換為 Leto */ .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/eLaeSht.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> The wealthy cities refused to help.<br><br> They were too afraid of <b>Hera's wrath</b> to offer shelter.<br><br> Leto needed a place that was humble and hidden, not rich and famous. </div> <a data-passage="Leto" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> /* 停止背景音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } /* 播放失敗音效 */ window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } /* 控制 GIF 淡出與內容淡入 */ setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } /* 背景圖 (Semele) */ .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/s2Hu6TY.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正為完美置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> The baby did not disappear.<br><br> Although Semele perished, Zeus saved the unborn child and sewed him into his thigh.<br><br> The baby was born as <b>Dionysus</b>, the god of wine. </div> <a data-passage="Semele" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> /* 停止背景音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } /* 播放失敗音效 */ window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } /* 控制 GIF 淡出與內容淡入 */ setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } /* 背景圖 (Maia) */ .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/jLFtkZG.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正為完美置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> Apollo is the son of Leto, not Maia.<br><br> Maia's child was <b>Hermes</b>, the clever messenger of the gods.<br><br> He was smart and fast from the day he was born. </div> <a data-passage="Maia" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> /* 停止背景音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } /* 播放失敗音效 */ window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } /* 控制 GIF 淡出與內容淡入 */ setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } /* 背景圖 (Europa) */ .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/AzPwDLD.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正為完美置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> Europa did not travel by ship.<br><br> She climbed onto the back of a gentle <b>white bull</b>, who was actually Zeus in disguise.<br><br> He swam across the ocean with her on his back. </div> <a data-passage="Europa" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> /* 停止背景音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm.currentTime = 0; } /* 播放失敗音效 */ window.bgm = new Audio("https://files.catbox.moe/yi9jxr.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; var playPromise = window.bgm.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.log("Audio Error:", error); }); } /* 控制 GIF 淡出與內容淡入 */ setTimeout(function() { $(".fail-gif-layer").fadeOut(1000); $(".fail-content-layer").delay(500).fadeIn(1000); }, 7500); </script> <style> body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } .fail-gif-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; } /* GIF 加大 */ .fail-gif { width: auto; height: auto; max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4); } /* 背景圖 (Ganymede) */ .fail-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.meee.com.tw/bciO7Os.jpg"); background-size: cover; background-position: center; z-index: 10; } .fail-box { position: fixed; top: 50%; left: 50%; /* 修正為完美置中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 3px solid #FF6347; border-radius: 20px; padding: 40px; width: 80%; max-width: 700px; /* 加寬 */ text-align: center; color: white; box-shadow: 0 0 50px rgba(255, 99, 71, 0.5); animation: shake 0.5s ease-in-out; } .fail-title { color: #FF6347; font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; } /* 文字加大 */ .fail-desc { font-size: 24px; margin-bottom: 35px; line-height: 1.5; color: #ddd; text-align: left; } /* 按鈕加大 */ .btn-retry { display: block; margin: 0 auto; width: fit-content; padding: 12px 50px; border: 2px solid #FF6347; color: #FF6347 !important; text-decoration: none !important; font-size: 26px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .btn-retry:hover { background: #FF6347; color: white !important; box-shadow: 0 0 20px #FF6347; transform: scale(1.05); } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 25% { transform: translate(-50%, -50%) translateX(-10px); } 75% { transform: translate(-50%, -50%) translateX(10px); } } </style> <div class="fail-gif-layer"><img class="fail-gif" src="https://i.meee.com.tw/p4JJgLd.gif"></div> <div class="fail-content-layer"> <div class="fail-box"> <div class="fail-title">❌ INCORRECT</div> <div class="fail-desc"> Ganymede did not go to the underworld.<br><br> He was taken to Mount Olympus to serve as the <b>cupbearer</b> for the gods, pouring nectar for them.<br><br> He lives there eternally. </div> <a data-passage="Ganymede" class="btn-retry" onclick="window.skipIntro = true;">↻ TRY AGAIN</a> </div> </div>
<script> /* === 1. 停止主選單音樂 === */ if (window.hubBGM) { window.hubBGM.pause(); window.hubBGM = null; } if (window.bgm) { window.bgm.pause(); window.bgm = null; } /* === 2. 播放音效並控制流程 === */ // 建立音訊物件 var introAudio = new Audio("https://files.catbox.moe/suyik0.mp3"); introAudio.volume = 1.0; introAudio.loop = false; // 當音訊播放結束時，跳轉到 Start introAudio.onended = function() { // 確保還在這一頁才跳轉 if(document.getElementById("intro-gif")) { $.wiki('<<goto "Start">>'); } }; // 開始播放 introAudio.play().catch(e => console.log("Audio Play Error:", e)); // 將音訊物件存入 window 以便 Skip 時可以停止 window.currentIntroAudio = introAudio; </script> <div class="video-container"> <img id="intro-gif" src="https://i.meee.com.tw/ASfc0z7.gif" class="intro-visual"> <div class="skip-btn" onclick="if(window.currentIntroAudio){window.currentIntroAudio.pause();} $.wiki('<<goto "Start">>')">SKIP >></div> </div> <style> /* === 全域設定 === */ html, body { margin: 0; padding: 0; overflow: hidden; } #ui-bar { display: none !important; } /* === 容器設定 (包含背景圖) === */ .video-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; /* ★★★ 設定背景圖片 ★★★ */ background: url("https://i.meee.com.tw/3OGq4OG.jpg") no-repeat center center; background-size: cover; /* 讓背景圖填滿整個螢幕 */ display: flex; justify-content: center; align-items: center; cursor: default; } /* === GIF 樣式 === */ .intro-visual { width: 100%; height: 100%; /* contain: 保持比例 (會露出背景); cover: 裁切填滿 (擋住背景) */ object-fit: contain; /* 讓滑鼠無法與圖片互動 (不會變手指) */ pointer-events: none; user-select: none; /* 稍微加一點陰影讓 GIF 與背景區隔 */ filter: drop-shadow(0 0 20px rgba(0,0,0,0.5)); } /* === 跳過按鈕樣式 === */ .skip-btn { position: absolute; bottom: 30px; right: 30px; color: rgba(255, 255, 255, 0.8); border: 2px solid rgba(255, 255, 255, 0.6); padding: 10px 30px; border-radius: 50px; font-family: 'Fredoka', sans-serif; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 100000; text-transform: uppercase; letter-spacing: 2px; background: rgba(0, 0, 0, 0.4); /* 增加一點按鈕底色 */ backdrop-filter: blur(5px); } .skip-btn:hover { color: white; background: rgba(255, 255, 255, 0.3); border-color: white; transform: scale(1.05); } </style>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { // 停止所有可能的上一頁音樂 ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2", "introSfx"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 立即停止舊音樂 window.stopAllBGM(); window.startSequence = function() { /* ★★★ Metis 專屬音效 ★★★ */ window.bgm = new Audio("https://files.catbox.moe/pmff2o.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* ★★★ 強制撐滿螢幕寬高，視覺最大化 ★★★ */ width: 100vw; height: 100vh; object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 背景圖 (Metis) */ background-image: url("https://i.meee.com.tw/kFTuNh9.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/2GuW5uh.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">Wisdom Prevails</div> <div class="story-text"> <p><b>You chose wisdom over brute force.</b></p> <p>Metis lives on within Zeus. Her cleverness is now a part of him, and through Athena, it guides heroes and cities.</p> <p>True power is not just strength, but knowing how to use it.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Metis's Drop of Pure Wisdom! ✨</span> </div> </div> </div> <<set $doneMetis to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { // ★★★ 關鍵修改：加入 'afterRunAudio' (小遊戲後的音樂) 和 'chaseSfx' ★★★ ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2", "chaseSfx", "afterRunAudio"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); // 雙重保險：移除所有 audio 標籤 document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // ★★★ 進來頁面，第一件事就是殺死上一頁的音樂 ★★★ window.stopAllBGM(); window.startSequence = function() { /* Leto 成功音效 */ window.bgm = new Audio("https://files.catbox.moe/kwl129.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* 強制撐滿螢幕 */ width: 100vw; height: 100vh; object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 背景圖 (Leto) */ background-image: url("https://i.meee.com.tw/eLaeSht.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/88PS9G5.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">A Safe Haven</div> <div class="story-text"> <p><b>You found the floating island of Delos.</b></p> <p>The barren rock became a sacred birthplace. Apollo and Artemis were born, bringing light and moon to the world.</p> <p>You proved that even the smallest hope can lead to great things.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Leto's Palm Branch from Delos! ✨</span> </div> </div> </div> <<set $doneLeto to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 立即停止舊音樂 window.stopAllBGM(); window.startSequence = function() { /* ★★★ Maia 專屬音效 ★★★ */ window.bgm = new Audio("https://files.catbox.moe/91rshv.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* 背景圖片設定 - 關鍵修正：使用 contain */ background-image: url("https://i.meee.com.tw/WjrvOyX.png"); /* ★★★ 讓背景圖跟GIF一樣「包含」在畫面中，不裁切 ★★★ */ background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } /* ★★★ GIF 設定 ★★★ */ .item-gif { /* 設為 100% 配合 object-fit: contain */ /* 這樣 GIF 就會跟背景圖 (background-size: contain) 完美重疊 */ width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 背景圖 (與上面相同) */ background-image: url("https://i.meee.com.tw/jLFtkZG.jpg"); /* 文字層背景也設為 contain 以保持一致性，或可改回 cover 視需求而定 */ background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/EMMMkEk.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">Hermes' Gift</div> <div class="story-text"> <p><b>You recognized the musical instrument.</b></p> <p>Hermes, the clever son of Maia, invented the lyre from a tortoise shell. It became a symbol of music and cunning.</p> <p>Your knowledge of myths has served you well.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Maia's Tortoise Shell Lyre! ✨</span> </div> </div> </div> <<set $doneMaia to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { ["menuBGM", "bgm", "hubBGM"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; window.stopAllBGM(); window.startSequence = function() { /* ★★★ 請更換 Semele 專屬音效 ★★★ */ window.bgm = new Audio("https://files.catbox.moe/nbtfk2.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後切換介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* ★★★ 強制撐滿螢幕寬高，視覺最大化 ★★★ */ width: 100vw; height: 100vh; object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 背景圖 (Semele) */ background-image: url("https://i.meee.com.tw/s2Hu6TY.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/NOl8h7B.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">The God of Joy</div> <div class="story-text"> <p><b>You remembered who was saved.</b></p> <p>Semele's child was rescued by Zeus and became Dionysus, the god of wine and celebration. Out of tragedy came joy.</p> <p>Your memory has honored her sacrifice.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Semele's Golden Wine Goblet! ✨</span> </div> </div> </div> <<set $doneSemele to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 立即停止舊音樂 window.stopAllBGM(); window.startSequence = function() { /* ★★★ Europa 專屬音效 (已更新) ★★★ */ window.bgm = new Audio("https://files.catbox.moe/a8rry8.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* ★★★ 強制撐滿螢幕寬高，視覺最大化 ★★★ */ width: 100vw; height: 100vh; object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 背景圖 (Europa) */ background-image: url("https://i.meee.com.tw/AzPwDLD.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/x6bkVSM.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">A New Continent</div> <div class="story-text"> <p><b>You knew it was the bull.</b></p> <p>Zeus, in the form of a white bull, carried Europa across the sea. Her journey was not an end, but a beginning—giving her name to the continent of Europe.</p> <p>You have correctly identified the start of a great legacy.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Europa's White Bull Horn! ✨</span> </div> </div> </div> <<set $doneEuropa to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* === 1. 音效與動畫控制 === */ window.stopAllBGM = function() { ["menuBGM", "bgm", "hubBGM", "storyAudio1", "storyAudio2"].forEach(name => { if (window[name]) { try { window[name].pause(); window[name].currentTime = 0; } catch(e) {} window[name] = null; } }); document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); }; // 立即停止舊音樂 window.stopAllBGM(); window.startSequence = function() { /* Ganymede 專屬音效 */ window.bgm = new Audio("https://files.catbox.moe/tzaqye.mp3"); window.bgm.loop = false; window.bgm.volume = 1.0; window.bgm.play().catch(e => { console.log("Autoplay prevented"); }); var gif = document.querySelector(".item-gif"); if(gif) { gif.style.opacity = 1; } }; /* 0.1秒後立刻開始動畫序列 */ setTimeout(function() { window.startSequence(); }, 100); /* 8秒後 (GIF播完) 切換到文字介面 */ setTimeout(function() { $(".item-video-layer").fadeOut(1000, function() { $(this).remove(); }); $(".success-content-layer").css("display", "flex").hide().fadeIn(1500); }, 8000); </script> <style> /* === 全局設定 === */ body, tw-story { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: black !important; height: 100vh; width: 100vw; } #ui-bar, tw-sidebar { display: none !important; } /* === 層級 1: GIF 動畫層 === */ .item-video-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: default; } .item-gif { /* ★★★ 修改：強制撐滿螢幕寬高 ★★★ */ width: 100vw; height: 100vh; /* 保持比例撐滿，不會變形 */ object-fit: contain; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3); opacity: 0; transition: opacity 0.5s; pointer-events: none; user-select: none; } /* === 層級 2: 成功故事層 === */ .success-content-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* ★★★ 修改：已更換為新的背景圖 ★★★ */ background-image: url("https://i.meee.com.tw/bciO7Os.jpg"); background-size: cover; background-position: center; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } /* === 故事框樣式 (皇家深色版) === */ .dialogue-box { background: linear-gradient(180deg, rgba(5, 20, 30, 0.95), rgba(0, 0, 0, 0.95)); border: 2px solid #FFD700; border-radius: 12px; padding: 35px; width: 85%; max-width: 750px; max-height: 60vh; overflow-y: auto; position: relative; text-align: left; color: #f0f0f0; box-shadow: 0 0 30px rgba(255, 215, 0, 0.15); font-family: 'Georgia', 'Times New Roman', serif; margin-top: -30px; } .title-tag { color: #FFD700; font-size: 26px; font-weight: bold; border-bottom: 1px solid rgba(255, 215, 0, 0.5); padding-bottom: 15px; margin-bottom: 20px; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 4px black; } .story-text { font-size: 19px; line-height: 1.7; color: #e0e0e0; text-shadow: 1px 1px 2px black; } .highlight { color: #FFD700; display: block; font-weight: bold; background: rgba(255, 215, 0, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); } /* === 返回按鈕 === */ .return-btn { margin-top: 25px; display: inline-block; background: rgba(0,0,0,0.8); color: #FFD700 !important; border: 2px solid #FFD700; padding: 12px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-decoration: none !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); cursor: pointer; transition: all 0.3s ease; font-family: sans-serif; } .return-btn:hover { background: #FFD700; color: #000 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: translateY(-3px); } /* 捲軸美化 */ .dialogue-box::-webkit-scrollbar { width: 6px; } .dialogue-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .dialogue-box::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; } </style> <div class="item-video-layer"> <img class="item-gif" src="https://i.meee.com.tw/FsKX4Mn.gif"> </div> <div class="success-content-layer"> <div class="dialogue-box"> <div class="title-tag">Divine Cupbearer</div> <div class="story-text"> <p><b>You knew his fate.</b></p> <p>Ganymede was taken to Olympus to serve nectar to the gods. He was granted immortality and eternal youth, a rare honor for a mortal.</p> <p>You have correctly recalled his destiny among the stars.</p> <br> <div style="text-align:center; margin-top:5px;"> <span class="highlight">✨ ACQUIRED: Ganymede's Golden Amphora! ✨</span> </div> </div> </div> <<set $doneGanymede to true>> <a data-passage="Start" class="return-btn">RETURN TO STATS</a> </div>
<script> /* 1. 停止音樂 */ if (window.bgm) { window.bgm.pause(); window.bgm = null; } document.querySelectorAll("audio").forEach(a => { a.pause(); a.remove(); }); /* 2. 倒數 2.5 秒後重新整理 */ setTimeout(function() { window.location.reload(); }, 2500); </script> <style> html, body { background-color: #2c3e50 !important; margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden !important; } #ui-bar, tw-sidebar { display: none !important; } .reset-container { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .reset-icon { font-size: 80px; animation: spinReverse 1s linear infinite; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); } .reset-text { color: #FFD700; font-family: "Comic Sans MS", sans-serif; font-size: 28px; letter-spacing: 2px; font-weight: bold; animation: pulse 1.5s infinite; text-transform: uppercase; text-shadow: 2px 2px 0px #FF6347; } @keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes pulse { 0% { opacity: 0.5; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.5; transform: scale(0.95); } } </style> <div class="reset-container"> <div class="reset-icon">⏳</div> <div class="reset-text">Rewinding Time...</div> </div>